<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav {
            width: 1349px;
            height: 100px;
            border: 1px solid black;
            margin: 20px auto; 
            display: flex;
            /*  弹性布局*/
            justify-content: space-between;
            
        }

        .nav>img {
            display: block;
            margin-top: 10px;
        }

        .nav span {
           line-height: 100px;
        }
    </style>
</head>

<body>   
    <div class="nav">
        <img src="./img/logo.jpg" alt="">·
        <span>首页</span>
        <span>概况</span>
        <span>楼层展览</span>
        <span>科普活动</span>
        <span>影院影讯</span>
        <span>科普志愿者</span>
        <span>咨询服务</span>
        <span>报名入口</span>

    </div>

    <script>
        /* var data = [{
            title: "首页",
            list: ["1", '1']
        }, {
            title: "概况",
            list: ["科技馆介绍", '馆内咨询', '通知公告', '预算公开']
        }, {
            title: "楼层展览",
            list: ["展馆1层", '展馆2层', '展馆3层', '临时展馆']
        }, {
            title: "科普活动",
            list: ["科普大篷车", '科普报告会', '馆校结合', '魅力科学课堂', '科普表演剧', '理论广角', '创客训练营', '数学实验室']
        }, {
        }, {
            title: "影院影讯",
            list: ["影院介绍", '播放场次', '影片介绍']
        }, {
        }, {
            title: "科普志愿者",
            list: ["志愿者管理办法", '志愿者风采', '网上申请']
        }, {
        }, {
            title: "咨询服务",
            list: ["开馆时间", '失物招领', '乘车路线', '参观须知', '联系我们']
        }, {
        }, {
            title: "报名入口",
            list: ["资源下载", '科学运动会报名', '科学大篷车报名']
        }, {

        },]; */

    </script>
</body>

</html>